<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- v-show使用display来控制显示与隐藏会一直挂载在Dom树上，不需要重新渲染，常用于经常显示隐藏的地方， -->
        <h1 v-show="show">看的见我吗</h1>
        <button @click="show = !show;">开关</button>
        <!-- v-if会把元素从Dom树上移除，常用于不需要经常更改的地方 -->
        <h1 v-if="isHello">你好</h1>
        <h1 v-else="isHello">再见</h1>
        <button @click="isHello = !isHello;">bye</button>
        
        <h1 v-if="a">a</h1>
        <h1 v-else-if="b">b</h1>
        <h1 v-else="c">c</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                show: true,
                isHello: true,
                a: true,
                b: true,
                c: true
            }
        })
    </script>
</body>
</html>